<template>
  <e-charts
    v-if="!isEmpty"
    id="sale-echarts"
    theme="ovilia-green"
    :options="echartsOptions"
    ref="myecharts"
  ></e-charts>
  <div v-else class="empty">暂无数据</div>
</template>
<script>
import * as echarts from 'echarts'
import china from '@/assets/china.json'
echarts.registerMap('china', china)
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      echartsOptions: {
        backgroundColor: '#080a20',
        title: {
          left: 'left',
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          map: 'china',
          zoom: 1.2,
          label: {
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#142957',
              borderColor: '#0692a4'
            },
            emphasis: {
              areaColor: '#0b1c2d'
            }
          }
        },
        series: [{
          name: '',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: function (val) {
            return val[2] / 8
          },
          itemStyle: {
            normal: {
              color: '#3ed4ff'
            }
          },
          data: []
        }]
      }
    }
  },
  created () {
    if (this.datas.length) {
      this.handleDatas(this.datas)
    }
  },
  mounted () {
    window.addEventListener('resize', this.loadEcharts)
    this.myChart = echarts.init(this.$refs.myecharts)
    this.myChart.setOption(this.echartsOptions)
  },
  methods: {
    handleDatas (data) {
      this.echartsOptions.series[0].data = data.map(item => {
        return { name: item.city, value: [item.lng * 1, item.lat * 1].concat(50) }
      })
    },
    loadEcharts () {
      if (this.$refs['myecharts']) {
        setTimeout(() => {
          this.$refs['myecharts'].resize()
        }, 10)
      }
    }
  },
  watch: {
    datas (val) {
      if (!val.length) {
        this.isEmpty = true
      } else {
        this.isEmpty = false
        this.handleDatas(val)
      }
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.loadEcharts)
  }
}
</script>
<style lang="scss" scoped>
#sale-echarts {
  width: calc(100vw - 60vw);
  height: calc(45vh - 20px);
}
.empty {
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #09f;
}
</style>